<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      :title="`${temp.goodsSpec}(${temp.gdStatus ? temp.gdStatus === 1 ? '重瓶' : temp.gdStatus === 2 ? '空瓶' : '' : ''})-${type===1?'出库':'入库'}明细`"
      :visible.sync="visible"
      width="80%"
      :append-to-body="true"
      :destroy-on-close="true"
      @closed="reset"
      @close="reset"
    >
      <div class="page">
        <el-table-form ref="form" :model="query">
          <el-form-item label="单据类型:" prop="reBillType">
            <el-select v-model="query.reBillType" filterable placeholder="请选择">
              <el-option
                v-for="item in reBillTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <template v-slot:btns>
            <el-button
              v-permission="1"
              type="primary"
              icon="el-icon-search"
              @click="search"
            >查询</el-button>
          </template>
        </el-table-form>
        <lb-table
          ref="lbTable"
          v-loading="$loadingPlugin.fetchData"
          border
          height="515px"
          element-loading-text="加载中"
          :column="tableData.column"
          :data="tableData.data"
          :total="tableData.total"
          custom-column
          pagination
          :immediate-fetch="false"
          @fetch="fetchData"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { invenStoreDetail } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'

  export default {
    components: {

    },
    data() {
      return {
        visible: false,
        temp: {},
        query: {
          reBillType: ''
        },
        type: '',
        reBillTypeList: [],
        tableData: {
          data: [],
          total: 0,
          column: [
            {
              type: 'index'
            },
            {
              prop: 'reBillType	',
              label: '单据类型',
              render: (h, { row }) => <span>{row.reBillType	 ? formatColumnMap(this.reBillTypeList, 'value', row.reBillType, 'label') : ''}</span>
            },
            {
              prop: 'gdCount',
              label: '数量',
              width: 105
            },
            {
              prop: 'reBillCode',
              label: '关联单号'
            },
            {
              prop: 'operator',
              label: '操作人'
            },
            {
              prop: 'operatorTime',
              label: '时间',
              render: (h, { row }) => (
              <span>
                {row.operatorTime && parseTime(row.operatorTime, '{y}-{m}-{d} {h}:{i}:{s}')}
              </span>
            )
            }
          ]
        }
      }
    },
    computed: {
    },
    watch: {

    },
    created() {
    },
    methods: {
      open(temp, type) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          this.type = type
          if (temp) {
            this.temp = temp
            this.fetchData({ currentPage: 1, pageSize: 20 })
            this.reBillTypeList = [
              { label: '调拨出库', value: 1 },
              { label: '调拨入库', value: 2 },
              { label: '领瓶出库', value: 3 },
              { label: '领瓶入库', value: 4 },
              { label: '还瓶出库', value: 5 },
              { label: '还瓶入库', value: 6 },
              { label: '订单配送', value: 7 },
              { label: '退瓶消单入库', value: 8 },
              { label: '预约退瓶', value: 9 },
              { label: '退瓶出库', value: 10 },
              { label: '出库单出库', value: 11 },
              { label: '入库单入库', value: 12 },
              { label: '盘盈', value: 13 },
              { label: '盘亏', value: 14 },
              { label: '退货出库', value: 15 },
              { label: '退货入库', value: 16 },
              { label: '计划充装单出库', value: 17 },
              { label: '计划充装单入库', value: 18 }
            ]
            let list
            if (type === 1) {
              list = this.reBillTypeList.filter(item => item.value === 1 || item.value === 11 || item.value === 15 || item.value === 3 || item.value === 17 || item.value === 10)
            }
            if (type === 2) {
              list = this.reBillTypeList.filter(item => item.value === 2 || item.value === 12 || item.value === 6 || item.value === 16 || item.value === 8 || item.value === 18)
            }
            this.reBillTypeList = [{ label: '全部', value: '' }].concat(list)
            this.query.reBillType = ''
          }
        })
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          currentPage,
          pageSize,
          params: {
            storeId: this.temp.storeId,
            specCode: this.temp.specCode,
            gdStatus: this.temp.gdStatus,
            reBillType: this.query.reBillType
          }
        }
        if (this.type) {
          query.params.storeType = this.type
        }
        const res = await invenStoreDetail(query)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      search() {
        this.$refs.lbTable.fetch({})
      },
      reset() {
        this.query = {
          reBillType: ''
        }
        this.reBillTypeList = []
      }
    }
  }
</script>

<style lang='scss' scoped>

</style>
